<template>
	<view class="container">
		<!-- 页面导航栏 -->
		<page-navbar :title="commodityInfo.commodity_name" showBack></page-navbar>

		<!-- 商品图片 -->
		<view class="product-images">
			<image class="product-image" :src="common.defaultImg(commodityInfo.commodity_images)" mode="aspectFill"
				@error="handleImageError"></image>
			<!-- 商品标签 -->
			<view class="product-badge">{{ commodityInfo.tag ? commodityInfo.tag : '推荐' }}</view>
		</view>

		<!-- 商品基本信息 -->
		<view class="product-info">
			<view class="product-header">
				<text class="product-name">{{ commodityInfo.commodity_name }}</text>
				<view class="product-type">
					<text class="type-text">{{ commodityInfo.type?.name }}</text>
				</view>
			</view>

			<!-- 价格信息 -->
			<view class="price-section">
				<view class="price-main">
					<text class="current-price">¥{{ filterPrice(commodityInfo.sale_price, commodityInfo.discount)
					}}</text>
					<text class="original-price" v-if="commodityInfo.discount">¥{{ commodityInfo.sale_price }}</text>
					<view class="discount-badge" v-if="commodityInfo.discount && commodityInfo.discount != 1">{{
						commodityInfo.discount * 10 }}折</view>
				</view>
				<view class="sales-info">
					<text class="sales-text">已售 {{ commodityInfo.sales_quantity }} 件</text>
				</view>
			</view>

			<!-- 满减活动 -->
			<view class="promotion-section" v-if="commodityInfo.full_amount">
				<view class="promotion-header">
					<uni-icons type="gift" size="16" color="#FF6B6B"></uni-icons>
					<text class="promotion-title">优惠活动</text>
				</view>
				<view class="promotion-item">
					<text class="promotion-tag">满减</text>
					<text class="promotion-desc">{{ `满${commodityInfo.full_amount}减${commodityInfo.full_reduction}`
					}}</text>
				</view>
			</view>
		</view>



		<!-- 商品详情 -->
		<view class="product-details">
			<view class="detail-header">
				<text class="detail-title">商品详情</text>
			</view>
			<view class="detail-content">
				<text class="detail-desc">{{ commodityInfo.commodity_description }}</text>
			</view>
		</view>
		<!-- 店家信息 -->
		<view class="merchant-info" v-if="commodityInfo.merchant">
			<view class="merchant-header">
				<view class="merchant-title">
					<uni-icons type="shop" size="20" color="#56ab2f"></uni-icons>
					<text class="merchant-name">{{ commodityInfo.merchant.merchant_name }}</text>
					<text class="merchant-spot">{{ commodityInfo.merchant.contact_phone }}</text>
				</view>
				<view class="merchant-badge">商家</view>
			</view>
			<view class="merchant-actions">
				<view class="action-item" @click="contactMerchant">
					<uni-icons type="phone" size="16" color="#666"></uni-icons>
					<text class="action-text">联系商家</text>
				</view>
				<!-- <view class="action-item" @click="viewStore">
					<uni-icons type="home" size="16" color="#666"></uni-icons>
					<text class="action-text">进店逛逛</text>
				</view> -->
			</view>
		</view>
		<view style="height: 36rpx"></view>

		<!-- 底部购买区域 -->
		<view class="bottom-bar">
			<view class="action-buttons">
				<view class="purchase-btn" @click="handlePurchase">
					<text class="purchase-text">立即购买</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import PageNavbar from '@/components/page-navbar/page-navbar.vue';
import SvgIcon from '@/components/svg-icon/svg-icon.vue';
import common from '@/utils/common.js';
import api from "@/api"

// 商品ID
const productId = ref('');
const isFavorited = ref(false);

// 商品信息
const commodityInfo = ref({
	merchant: {}
});

// 页面加载
onLoad((options) => {
	if (options.id) {
		productId.value = options.id;
		loadProductDetail(options.id);
	}
});

onMounted(() => {
	getData()
})

const getData = () => {
	api.commerceApi.list({
		id: productId.value,
		loding: true
	}).then((res) => {
		console.log(res.list[0]);
		commodityInfo.value = res.list[0];
	});
}

// 售价
const filterPrice = (sale_price, discount) => {
	if (discount) {
		return (sale_price * discount).toFixed(2);
	} else {
		return sale_price;
	}
};

// 加载商品详情
const loadProductDetail = (id) => {
	// TODO: 根据ID调用API获取商品详情
};

// 立即购买
const handlePurchase = () => {
	uni.navigateTo({
		url: '/pages/commerce/purchase?id=' + productId.value
	});
};

// 图片加载错误处理
const handleImageError = (event) => {
	console.log('图片加载失败，使用默认图片');
	event.target.src = '/static/images/default-commodity.svg';
};

// 联系商家
const contactMerchant = () => {
	if (commodityInfo.value.merchant?.contact_phone) {
		uni.makePhoneCall({
			phoneNumber: commodityInfo.value.merchant.contact_phone,
			success: () => {
				console.log('拨打电话成功');
			},
			fail: (err) => {
				console.log('拨打电话失败', err);
				uni.showToast({
					title: '拨打电话失败',
					icon: 'none'
				});
			}
		});
	} else {
		uni.showToast({
			title: '商家电话暂不可用',
			icon: 'none'
		});
	}
};

// 查看店铺
// const viewStore = () => {
// 	if (commodityInfo.value.merchant?.id) {
// 		uni.navigateTo({
// 			url: `/pages/commerce/store?merchantId=${commodityInfo.value.merchant.id}`
// 		});
// 	} else {
// 		uni.showToast({
// 			title: '店铺暂不可用',
// 			icon: 'none'
// 		});
// 	}
// };

</script>

<style lang="scss" scoped>
.container {
	background-color: #f2f1f6;
	min-height: 100vh;
	width: 100vw;
	padding-bottom: 120rpx; // 为底部按钮留出空间
	box-sizing: border-box;
}

.product-images {
	position: relative;
	height: 750rpx;
	background: white;

	.product-image {
		width: 100%;
		height: 100%;
	}

	.product-badge {
		position: absolute;
		top: 30rpx;
		right: 30rpx;
		background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
		color: white;
		font-size: 24rpx;
		padding: 8rpx 20rpx;
		border-radius: 20rpx;
		font-weight: bold;
		z-index: 10;
	}
}

.product-info {
	background: white;
	margin-top: 20rpx;
	padding: 24rpx;

	.product-header {
		margin-bottom: 30rpx;

		.product-name {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
			line-height: 1.4;
			margin-bottom: 15rpx;
			display: block;
		}

		.product-type {
			display: flex;
			align-items: center;
			gap: 10rpx;

			.type-text {
				font-size: 26rpx;
				color: #666;
				background: rgba(102, 102, 102, 0.1);
				padding: 8rpx 16rpx;
				border-radius: 12rpx;
			}
		}
	}

	.price-section {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30rpx;

		.price-main {
			display: flex;
			align-items: center;
			gap: 15rpx;

			.current-price {
				font-size: 42rpx;
				color: #ff6b6b;
				font-weight: bold;
			}

			.original-price {
				font-size: 28rpx;
				color: #999;
				text-decoration: line-through;
			}

			.discount-badge {
				background: rgba(255, 107, 107, 0.1);
				color: #ff6b6b;
				font-size: 24rpx;
				padding: 6rpx 12rpx;
				border-radius: 8rpx;
				font-weight: bold;
			}
		}

		.sales-info {
			.sales-text {
				font-size: 26rpx;
				color: #999;
			}
		}
	}

	.promotion-section {
		border: 2rpx solid #ff6b6b;
		border-radius: 12rpx;
		padding: 20rpx;
		background: rgba(255, 107, 107, 0.05);

		.promotion-header {
			display: flex;
			align-items: center;
			gap: 10rpx;
			margin-bottom: 15rpx;

			.promotion-title {
				font-size: 26rpx;
				color: #ff6b6b;
				font-weight: bold;
			}
		}

		.promotion-item {
			display: flex;
			align-items: center;
			gap: 15rpx;

			.promotion-tag {
				background: #ff6b6b;
				color: white;
				font-size: 22rpx;
				padding: 4rpx 12rpx;
				border-radius: 8rpx;
			}

			.promotion-desc {
				font-size: 26rpx;
				color: #333;
			}
		}
	}
}

.merchant-info {
	background: white;
	margin-top: 20rpx;
	padding: 30rpx;
	border-bottom: 20rpx solid #f2f1f6;

	.merchant-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30rpx;

		.merchant-title {
			display: flex;
			align-items: center;
			gap: 12rpx;

			.merchant-name {
				font-size: 30rpx;
				font-weight: bold;
				color: #333;
				line-height: 1;
			}

			.merchant-spot {
				font-size: 24rpx;
				color: #999;
				margin-left: 10rpx;
				line-height: 1;
			}
		}

		.merchant-badge {
			background: linear-gradient(135deg, #56ab2f, #a8e6cf);
			color: white;
			font-size: 22rpx;
			padding: 6rpx 16rpx;
			border-radius: 12rpx;
			font-weight: bold;
		}
	}

	.merchant-actions {
		display: flex;
		gap: 40rpx;

		.action-item {
			display: flex;
			align-items: center;
			gap: 8rpx;
			padding: 16rpx 24rpx;
			background: rgba(86, 171, 47, 0.1);
			border-radius: 24rpx;
			border: 2rpx solid rgba(86, 171, 47, 0.3);
			transition: all 0.3s ease;

			&:active {
				background: rgba(86, 171, 47, 0.2);
				transform: scale(0.95);
			}

			.action-text {
				font-size: 26rpx;
				color: #666;
			}
		}
	}
}

.product-details {
	background: white;
	padding: 40rpx 30rpx;

	.detail-header {
		margin-bottom: 30rpx;

		.detail-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}
	}

	.detail-content {
		.detail-desc {
			font-size: 28rpx;
			color: #666;
			line-height: 1.6;
			display: block;
			text-indent: 2em;
		}
	}
}

.bottom-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: white;
	padding: 20rpx 30rpx;
	box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
	z-index: 999;

	.action-buttons {
		display: flex;
		align-items: center;

		.purchase-btn {
			flex: 1;
			background: linear-gradient(135deg, #56ab2f, #a8e6cf);
			color: white;
			text-align: center;
			padding: 24rpx;
			border-radius: 50rpx;
			box-shadow: 0 4rpx 16rpx rgba(86, 171, 47, 0.4);
			transition: all 0.3s ease;

			&:active {
				transform: scale(0.98);
				box-shadow: 0 2rpx 8rpx rgba(86, 171, 47, 0.6);
			}

			.purchase-text {
				font-size: 32rpx;
				font-weight: bold;
			}
		}
	}
}
</style>
